<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>易电云</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1607901_naehb981kr.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
  <style>
    body{
      margin: 0;
      font-size: 14px;
    }
    @keyframes myfirst {
      0% {
        opacity: 0;
        transform: translateY(-40px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .swiper-container{
      animation: myfirst 1s;
    }
    #app{
      padding-bottom: 100px;
      /*padding-bottom: 65px;*/
    }
    .iconfont{
      font-size: 26px;
    }
    .foot{
      position: fixed;
      bottom: 0;
      font-size: 0;
      width: 100%;
      border-top: 1px solid #eee;
      background: #fff;
    }
    .foot-item{
      width: 25%;
      display: inline-block;
      text-align: center;
      padding: 10px 0 6px;
    }
    .foot-text{
      font-size: 12px;
      margin-top: 4px;
    }
    .foot-active{
      color: #e67a17;
    }
    .swiper-pic{
      width: 100%;
      display: block;
    }
    .head{
      height: 50px;
      /*background-color: #202124;*/
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .head-logo{
      height: 40px;
      margin: 5px 16px;
    }
    .head .iconfont{
      margin-right: 16px;
    }
    .panel-container{
      padding: 12px 16px;
      box-shadow: 0 2px 4px rgba(3,27,78,.06);
      border-bottom: 1px solid #E5E8ED;
      box-sizing: border-box;
      background: #fff;
    }
    .panel-box{
      position: relative;
    }
    .panel-box:after{
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -4px;
      width: 8px;
      height: 12px;
      background-image: url('https://imgcache.qq.com/open_proj/proj_qcloud_v2/platform/home/css/sprite/main-media9-202001132040.svg');
      background-position: 50% 50%;
    }
    .panel-icon{
      width: 32px;
      height: 32px;
    }
    .panel-text{
      display: inline-block;
      margin-left: 8px;
    }
    .panel-title{
      font-size: 16px;
      line-height: 20px;
      height: 20px;
    }
    .panel-desc{
      line-height: 20px;
      color: #666;
      font-size: 12px;
    }
    .cloud{
      padding-top: 30px;
    }
    .cloud-title{
      text-align: center;
      font-size: 24px;
      line-height: 32px;
      font-weight: 400;
      margin-bottom: 30px;
    }
    .panel-background{
      background: #F5F7FA;
      padding-bottom: 12px;
    }
    .cloud-panel{
      height: 50px;
      border-bottom: 1px solid #e5e5e5;
      position: relative;
      display: flex;
      align-items: center;
    }
    .cloud-panel:after{
      content: '';
      width: 18px;
      height: 18px;
      position: absolute;
      right: 13px;
      top: 50%;
      margin-top: -9px;
      background-image: url('https://imgcache.qq.com/open_proj/proj_qcloud_v2/platform/home/css/sprite/main-202001132040.svg');
      background-repeat: no-repeat;
      background-size: 1750% 1412.5%;
      background-position: 81.06% 64.29%;
    }
    .cloud-text{
      font-size: 16px;
      color: #333;
    }
    .cloud-panel>.panel-icon{
      margin: 10px 12px 8px 16px;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="head">
    <img onclick="javascript:location='http://180.101.226.58:8100/newproject/'" class="head-logo" src="http://180.101.226.58:8100/newproject/img/est/logo.png" alt="">
    <div>
      <span class="iconfont icon-sousuo"></span>
      <span class="iconfont icon-wo"></span>
      <span class="iconfont icon-ziyuan"></span>
    </div>
  </div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img class="swiper-pic"
                                     src="https://gw.alicdn.com/tfs/TB1cG2gsWL7gK0jSZFBXXXZZpXa-750-600.jpg_q75s150.jpg"
                                     alt=""></div>
      <div class="swiper-slide"><img class="swiper-pic"
                                     src="https://gw.alicdn.com/tfs/TB1Mbh7m1T2gK0jSZFvXXXnFXXa-750-600.jpg_q75s150.jpg"
                                     alt=""></div>
      <div class="swiper-slide"><img class="swiper-pic"
                                     src="https://gw.alicdn.com/tfs/TB1BlY4teH2gK0jSZJnXXaT1FXa-750-600.png" alt="">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
  <!--<div id="container" style="width: 90%;height:280px;margin: 0 auto;"></div>-->
  <div class="panel-background">
    <div class="panel-container">
      <div class="panel-box">
        <img class="panel-icon" src="https://main.qcloudimg.com/raw/6a1692c0360404573728008c31186a61.svg" alt="">
        <div class="panel-text">
          <div class="panel-title">免费套餐</div>
          <div class="panel-desc">免费试用云资源</div>
        </div>
      </div>
    </div>
  </div>
  <div class="cloud">
    <div class="cloud-title">我们的云产品</div>
    <div class="cloud-panel" style="border-top: 1px solid #e5e5e5;">
      <img class="panel-icon" src="https://main.qcloudimg.com/raw/3f060ca44c331bee71c463414a85d731.svg" alt="">
      <div class="cloud-text">计算</div>
    </div>
    <div class="cloud-panel">
      <img class="panel-icon" src="https://main.qcloudimg.com/raw/e08ffe51a3f144b412b0588bc3fd2f45.svg" alt="">
      <div class="cloud-text">存储</div>
    </div>
    <div class="cloud-panel">
      <img class="panel-icon" src="https://main.qcloudimg.com/raw/edfa8ece256dad28fff0b1154aeb098f.svg" alt="">
      <div class="cloud-text">网络</div>
    </div>
    <div class="cloud-panel">
      <img class="panel-icon" src="https://main.qcloudimg.com/raw/6b59f8db9c981e536d61c3620fee2b83.svg" alt="">
      <div class="cloud-text">CDN与加速</div>
    </div>
    <div class="cloud-panel">
      <img class="panel-icon" src="https://main.qcloudimg.com/raw/21f8e9cc03c9b5f6bb1000d2a3a98248.svg" alt="">
      <div class="cloud-text">数据库</div>
    </div>
    <div class="cloud-panel">
      <img class="panel-icon" src="https://main.qcloudimg.com/raw/ebaf8b1f049a9fb36d91e58553a12724.svg" alt="">
      <div class="cloud-text">视频服务</div>
    </div>
    <div class="cloud-panel">
      <img class="panel-icon" src="https://main.qcloudimg.com/raw/4f21d57811548d5def7ad01b7251ad3b.svg" alt="">
      <div class="cloud-text">云通信</div>
    </div>
  </div>
  <div class="foot">
    <div class="foot-item foot-active">
      <span class="iconfont icon-shouye"></span>
      <div class="foot-text">首页</div>
    </div>
    <div class="foot-item">
      <span class="iconfont icon-fenlei"></span>
      <div class="foot-text">工单</div>
    </div>
    <div class="foot-item">
      <span class="iconfont icon-xiaoxi"></span>
      <div class="foot-text">客服</div>
    </div>
    <div class="foot-item">
      <span class="iconfont icon-shezhi"></span>
      <div class="foot-text">设置</div>
    </div>
  </div>
</div>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.min.js"></script>-->
<script>
  var mySwiper = new Swiper('.swiper-container', {
    autoplay:  {
      disableOnInteraction: false,
      delay: 2500,
    },
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination'
    }
  });
  var option = {
    title: {
      text: '日负荷曲线(kW)',
      textStyle: {
        fontSize: 12
      }
      // left: 'center'
    },
    // tooltip: {
    //   trigger: 'axis',
    //   axisPointer: {
    //     type: 'cross'
    //   },
    //   textStyle: {
    //     align: 'left'
    //   }
    // },
    legend: {
      // left: 'left',
      itemWidth: 15,// 标志图形的长度
      itemHeight: 10,
      data: ['昨日有功功率', '昨日温度'],
      textStyle: {
        fontSize: 10
      }
    },
    // toolbox: {
    //   show: true,
    //   feature: {
    //     magicType: {type: ['line', 'bar']},
    //     restore: {},
    //     saveAsImage: {}
    //   }
    // },
    xAxis: {
      type: 'category',
      // name: 'x',
      splitLine: {show: false},
      // axisLabel: { interval: 11 },
      /* eslint-disable */
      data: ["00:00", "00:05", "00:10", "00:15", "00:20", "00:25", "00:30", "00:35", "00:40", "00:45", "00:50", "00:55", "01:00", "01:05", "01:10", "01:15", "01:20", "01:25", "01:30", "01:35", "01:40", "01:45"]
    },
    // grid: {
    //   left: '3%',
    //   right: '4%',
    //   bottom: '3%',
    //   containLabel: true
    // },
    yAxis: [{
      type: 'value',
      name: '用电量',
      scale: true,
      axisLabel: {
        formatter: '{value}kW'
      }
    }, {
      type: 'value',
      name: '温度',
      scale: true,
      axisLabel: {
        formatter: '{value}℃'
      }
    }],
    series: [{
      name: '昨日有功功率',
      type: 'bar',
      data: [50, 50, 38.5, 37.5, 38, 39.5, 42, 38, 37, 39.5, 38, 38, 37.5, 37, 41.5, 40, 36, 37, 37.5, 38, 37.5, 39.5],
      connectNulls: true,
      lineStyle: {
        normal: {}
      },
      //data:[11, 11, 15, 13, 12, 13, 10],
      markPoint: {
        data: [
          {type: 'max', name: '最大值'},
          {type: 'min', name: '最小值'}
        ],
        symbolSize: 30
      },
      markLine: {
        data: [
          {
            type: 'average',
            name: '平均值',
            label: {
              normal: {
                position: 'start',
                formatter: '平均有功功率'
              }
            }
          }
        ]
      }
    },
      {
        name: '昨日温度',
        type: 'bar',
        yAxisIndex: 1,
        smooth: true,
        connectNulls: true,
        data: [4, 14, 10, 0, 6, 15, 5, 19, 0, 1, 18, 7, 19, 5, 14, 12, 2, 16, 16, 3, 17, 6]
      }]
  };
  // echarts.init(document.getElementById('container'), 'light').setOption(option)
</script>
</body>
</html>